<template>
  <a-scrollbar style="height: 300px; overflow: auto">
    <div v-if="['WAIT_SCHEDULE', 'EXECUTING', 'WAIT_VERIFY', 'FINISHED', 'NEGOTIATE_TERMINATED', 'TERMINATED'].includes(taskInfo.status)">
      <div v-if="taskInfo.type == 'NEW_PRODUCT_PICTURE'">
        <div class="title-bar" v-if="obj.originalPicList && obj.originalPicList.length > 0">
          <span>原图</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.originalPicList && obj.originalPicList.length > 0" @click="downloadAttr(obj.originalPicList, '新品套图-原图')">批量下载</span>
        </div>
        <div class="box clearfix mt10" v-if="obj.originalPicList && obj.originalPicList.length > 0">
          <div class="box-img-con" v-for="(item, index) of obj.originalPicList" :key="index">
            <div class="mask">
              <div class="btn-con">
                <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index, obj.originalPicList)" />
                <icon-download @click="download(item.url)" class="cursor" />
              </div>
            </div>
            <a-image :src="item.url" width="100%" height="100%" />
          </div>
        </div>
        <div class="title-bar">
          <span>橱窗图</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.windowPicList && obj.windowPicList.length > 0" @click="downloadAttr(obj.windowPicList, '新品套图-橱窗图')">批量下载</span>
        </div>
        <div class="box-img-con" v-for="(item, index) of obj.windowPicList" :key="index">
          <div class="img-title">{{ titleMap[item.busType] }}</div>
          <div style="position: relative; width: 80px; height: 80px" @click="showImgPre(index, obj.windowPicList)">
            <a-image :src="item.url" :preview="false" width="100%" height="100%" />
          </div>
          <div class="img-title highlight cursor" v-if="showDownLoadBtn(item)" @click="downloadOriginAttr(item)">下载附件</div>
        </div>
      </div>
      <div v-if="taskInfo.type == 'QUICK_FIX_PICTURE'">
        <div class="title-bar" v-if="obj.fixPicList && obj.fixPicList.length > 0">
          <span>修图</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" @click="downloadAttr(obj.fixPicList, '快速修图-修图')">批量下载</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.fixPicAttList && obj.fixPicAttList.length > 0" @click="downloadAttr(obj.fixPicAttList, '修图附件')">附件下载</span>
        </div>
        <div class="box clearfix mt10" v-if="obj.fixPicList && obj.fixPicList.length > 0">
          <div class="box-img-con" v-for="(item, index) of obj.fixPicList" :key="index">
            <a-image :src="item.url" :preview="false" @click="showImgPre(index, obj.fixPicList)" width="100%" height="100%" />
          </div>
        </div>
        <div class="title-bar" v-if="obj.addSmallPosterPicList && obj.addSmallPosterPicList.length > 0">
          <span>A+小海报</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" @click="downloadAttr(obj.addSmallPosterPicList, '快速修图-A+小海报')">批量下载</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.addSmallPosterListAttList && obj.addSmallPosterListAttList.length > 0" @click="downloadAttr(obj.addSmallPosterListAttList, 'A+小海报附件')">附件下载</span>
        </div>
        <div class="clearfix mt10" v-if="obj.addSmallPosterPicList && obj.addSmallPosterPicList.length > 0">
          <div class="box-img-con" v-for="(item, index) of obj.addSmallPosterPicList" :key="index">
            <a-image :src="item.url" :preview="false" @click="showImgPre(index, obj.addSmallPosterPicList)" width="100%" height="100%" />
          </div>
        </div>
        <div class="title-bar" v-if="obj.addBigPosterPicList && obj.addBigPosterPicList.length > 0">
          <span>A+大海报</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" @click="downloadAttr(obj.addBigPosterPicList, '快速修图-A+大海报')">批量下载</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.addBigPosterAttList && obj.addBigPosterAttList.length > 0" @click="downloadAttr(obj.addBigPosterAttList, 'A+大海报附件')">附件下载</span>
        </div>
        <div class="clearfix mt10" v-if="obj.addBigPosterPicList && obj.addBigPosterPicList.length > 0">
          <div class="box-img-con" v-for="(item, index) of obj.addBigPosterPicList" :key="index">
            <a-image :src="item.url" :preview="false" @click="showImgPre(index, obj.addBigPosterPicList)" width="100%" height="100%" />
          </div>
        </div>
      </div>
      <div v-if="taskInfo.type == 'ORIGINAL_PICTURE'">
        <div class="title-bar" v-if="obj.originalPicList && obj.originalPicList.length > 0">
          <span>原图</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" @click="downloadAttr(obj.originalPicList, '原图任务')">批量下载</span>
        </div>
        <div class="box clearfix mt10" v-if="obj.originalPicList && obj.originalPicList.length > 0">
          <div class="box-img-con" v-for="(item, index) of obj.originalPicList" :key="index">
            <a-image :src="item.url" @click="showImgPre(index, obj.originalPicList)" :preview="false" width="100%" height="100%" />
          </div>
        </div>
      </div>
      <div v-if="taskInfo.type == 'SHOOT_VIDEO'">
        <div class="title-bar" v-if="obj.originalVideoList && obj.originalVideoList.length > 0">
          <span>视频</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" @click="downloadAttr(obj.originalVideoList, '视频任务-视频')">批量下载</span>
          <span style="font-weight: 200" class="cursor ml10 highlight" v-if="obj.originalVideoAttList && obj.originalVideoAttList.length > 0" @click="downloadAttr(obj.originalVideoAttList, '视频附件')">附件下载</span>
        </div>
        <div class="box clearfix mt10" v-if="obj.originalVideoList && obj.originalVideoList.length > 0">
          <div class="fl" v-for="(item, index) of obj.originalVideoList" :key="index">
            <video :src="item.url" style="width: 160px; height: 160px; margin-right: 10px" width="160" height="160" controls></video>
          </div>
        </div>
      </div>
    </div>
    <a-empty v-else description="暂无数据" />

    <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="previewList" />
  </a-scrollbar>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { downloadMul } from '@/utils'

  const titleMap = {
    MAIN: '主图',
    PANORAMA: '全景图',
    SPECIAL: '特写图',
    SIZE: '尺寸图',
    MODEL: '模特图',
    POSTER: '海报图',
  }

  const props = defineProps(['info'])
  let obj: any = ref({})
  let picArr: any = ref({})
  let taskInfo: any = ref({})
  let current = ref(0)
  let previewList = ref([])
  let visible = ref(false)
  const setRes = (info: any) => {
    taskInfo.value = info
    switch (info.type) {
      case 'NEW_PRODUCT_PICTURE':
        obj.value = info?.newProductPicDelivery || {}
        if (!obj.value.originalPicList) obj.value.originalPicList = []
        if (!obj.value.windowPicList) obj.value.windowPicList = []
        break
      case 'QUICK_FIX_PICTURE':
        obj.value = info?.quickFixPicDelivery || {}
        if (!obj.value.fixPicList) obj.value.fixPicList = []
        if (!obj.value.addSmallPosterList) obj.value.addSmallPosterList = []
        if (!obj.value.addBigPosterList) obj.value.addBigPosterList = []
        break
      case 'ORIGINAL_PICTURE':
        obj.value = info?.originalPicDelivery || {}
        if (!obj.value.originalPicList) obj.value.originalPicList = []
        break
      case 'SHOOT_VIDEO':
        obj.value = info?.shootViedoDelivery || {}
        if (!obj.value.originalVideoList) obj.value.originalVideoList = []
        break
    }
    console.log(obj.value)
  }

  const setWindowPic = (list: any) => {
    let arr: any = []
    list.forEach((item: any) => {
      let i = arr.findIndex((e: any) => e.busType == item.busType)
      if (i == -1) {
        let obj = {
          busType: item.busType,
          busTypeName: titleMap[item.busType],
          picList: list.filter((ell: any) => ell.busType == item.busType),
        }
        arr.push(obj)
      }
    })
    picArr.value = arr
  }

  const showImgPre = (index: number, arr: any) => {
    current.value = index
    previewList.value = arr.map((item: any) => item.url)
    visible.value = true
  }

  const download = (url: string) => {
    let a = document.createElement('a')
    a.href = url
    a.click()
  }

  const downloadAttr = (list: any, name: string) => {
    console.log(list)
    downloadMul(list, name)
  }

  const downloadOriginAttr = (info: any) => {
    console.log(obj.value.windowAttList, info)
    let arr = obj.value.windowAttList.filter((e: any) => e.busType == info.busType)
    downloadAttr(arr, titleMap[info.busType])
  }

  const showDownLoadBtn = (info: any) => {
    let ResArr = obj.value?.windowAttList || []
    let arr = ResArr.filter((e: any) => e.busType == info.busType)
    if (arr[0]) {
      return true
    } else {
      return false
    }
  }

  defineExpose({ setRes })
</script>

<style lang="less" scoped>
  .img-title {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    background-color: #d7d7d7;
    // color: white;
    z-index: 10;
    opacity: 0.9;
    font-size: 10px;
  }

  .post-con {
    width: 100%;
    padding: 5px;
    background-color: #d7d7d7;
  }

  .box-img-con {
    float: left;
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 10px 10px 0;
    &:hover {
      .mask {
        display: block;
      }
    }
    .mask {
      height: 80px;
      width: 80px;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
      .btn-con {
        width: 80px;
        color: white;
        font-size: 18px;
        text-align: center;
        margin-top: 25px;
        align-items: center;
      }
    }
  }
</style>
